<template>
    <view class="collWrap">
        <view
            style="height: 580rpx;position: relative;display: flex; justify-content:space-around;align-items: center;padding:0px 20px;position: relative;">
            <view :style="{ top: safeAreaInsets.top + 'px', left: '40rpx', position: 'absolute' }" @click="onBack">
                <u-icon name="arrow-left" size="19" color="#fff"></u-icon>
            </view>
            <view style="">
                <view style="color: #fff;margin-top: -60rpx;font-size: 26px;font-weight: 600;">
                    {{ type == 2 ? '我的收藏' : type == 3 ? '我参与的' : '我的错题' }}</view>
                <view style="margin-top: 40rpx;" v-if="type == 2">
                    <view style="color: #fff;">典型汇总，重点标记</view>
                    <view style="color: #fff;padding-top: 10px;">个性化学习</view>
                </view>
                <view style="margin-top: 40rpx;" v-else-if="type == 3">
                    <view style="color: #fff;">我参与的</view>
                    <view style="color: #fff;padding-top: 10px;">练测、考试快速定位查询</view>
                </view>
                <view v-else style="margin-top: 40rpx;">
                    <view style="color: #fff;">查漏补缺，模块化学习</view>
                </view>
            </view>
            <image v-if="type == 2" src="../../static/images/collection.svg" style="width: 354rpx;height: 310rpx;">
            </image>
            <image v-else-if="type == 3" src="../../static/images/participated.svg"
                style="width: 354rpx;height: 310rpx;">
            </image>
            <image v-else src="../../static/images/wrongQuestionLogo.svg" style="width: 354rpx;height: 310rpx;"></image>

            <image src="../../static/images/img_bg.svg"
                style="width: 100%;height: 100%;position: absolute;top:-12rpx;left:0;z-index: -1;"></image>
        </view>
        <view
            style="padding:20rpx 40rpx 40rpx;border-radius: 10px 10px 0 0;margin-top: -120rpx;background-color: #fff;">
            <!-- <view style="display: flex;justify-content: space-between;align-items: center;">
                <view style="display: flex;align-items: center;">
                    <image style="width: 120rpx;height: 120rpx;margin-top: -30rpx;margin-right: 20rpx;border-radius: 50%;"
                        :src="loginData.avatar?loginData.avatar:'../../static/images/user/noTx.svg'" />
                    <text>{{ loginData.nickName||"--" }}</text>
                </view>
                <text>{{ loginData.phone || "--"  }}</text>
            </view> -->
            <!-- <view
                style="background: #F6FFF7;padding: 20rpx; display: flex;justify-content: space-between;align-items: center;"
                v-if="type != 3">
                <view style="display: flex;">
                    <image src="../../static/images/minMedal.svg"
                        style="width: 48rpx;height: 56rpx;margin-right: 20rpx;"></image>
                    <view>
                        <view>{{ type == 2 ? '收藏成果' : '错题笔记' }}</view>
                        <view style="display: flex;">
                            <view v-if="type == 2" style="margin-right: 40rpx;">
                                <view style="margin: 15rpx 0;">{{ information.subjectNum }}</view>
                                <view style="color: #666666; font-size: 14px;">练测资源</view>
                            </view>
                            <view>
                                <view style="margin: 15rpx 0;">{{ information.itemNum }}</view>
                                <view style="color: #666666; font-size: 14px;">{{ type == 2 ? '收藏数量' : '错题数量' }}</view>
                            </view>
                            <view style="margin-left: 40rpx;">
                                <view style="margin: 15rpx 0;">{{ information.day }}</view>
                                <view style="color: #666666; font-size: 14px;">累计天数</view>
                            </view>
                        </view>
                    </view>
                </view>
                <image src="../../static/images/maxMedal.svg" style="width:118rpx;height: 158rpx;"></image>
            </view> -->
            <u-tabs :list="listData" @click="click" :line-width="36"
                :lineColor="`url(https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/activeBot.svg) 100% 100%`" />
            <view
                v-if="value === 'practice' || value == 'teachingMaterial' || value == 'dataDocument' || value == 'res'">
                <u-input placeholder="请输入关键字" prefixIcon="search"
                    prefixIconStyle="font-size: 32px;color: #909399; padding:0 14rpx"
                    customStyle="border-radius: 24rpx; height: 60rpx; margin-top: 20rpx" v-model="queryKey"
                    @confirm="onQuestionTabPractices"></u-input>
                <scroll-view :scroll-y="true" v-if="value == 'teachingMaterial'" style="margin-top: 32rpx"
                    class="scrollWrap">
                    <view class="card" v-for="item in practiceData" :key="item.id"
                        @click="onGoDetaile(item, 'teachingMaterial',item.expire !=0)">
                        <view class="flex" style="position: relative;">
                            <image src="../../static/images/removedIcon.svg" v-if="item.expire != 0"
                                style="width: 76rpx;height: 74rpx;position: absolute;left: 0;top: 0;" />
                            <image :src="item.cover" :style="{ width: '128rpx', height: '100%' }" />
                            <view style="margin: 28rpx 0 28rpx 42rpx;justify-content:space-between; width: 360rpx;"
                                class="flex flex-column">
                                <view style="font-size: 32rpx;font-weight: 400;" class="oneWrap">{{ item.name }}</view>
                                <view style="color: #666666; font-size: 24rpx" class="oneWrap">编写人：{{ item.author }}
                                </view>
                                <view style="color: #666666; font-size: 24rpx" class="oneWrap">出版社：{{ item.publisher }}
                                </view>
                            </view>
                        </view>
                        <view class="center" style="padding-top: 28rpx; align-items: baseline; display: flex;">
                            <view class="center">
                                <text style="color: #666666; font-size: 24rpx">查看</text>
                                <image :src="'/static/images/teachingMaterial/leftArrow.svg'"
                                    style="width: 16rpx;height: 24rpx;margin-left: 8rpx;" />
                            </view>
                        </view>
                    </view>
                </scroll-view>
                <scroll-view :scroll-y="true" v-else-if="value == 'dataDocument'" style="margin-top: 32rpx"
                    class="scrollWrap">
                    <view 
                        class="fileItem" 
                        style="position: relative" 
                        v-for="item in practiceData" :key="item.id"
                        @click=" onGoDetaile(item, 'dataDocument',item.expire !=0)">
                        <image src="../../static/images/removedIcon.svg" v-if="item.expire != 0" style="width: 76rpx;height: 74rpx;position: absolute;left: 0;top: 0;" />
                        <view class="center">
                            <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/pdfIcon.svg"
                                :style="{ width: '80rpx', height: '80rpx' }" />
                            <view class="contentStyle">
                                <view class="title oneWrap">{{ item.name }}</view>
                                <view class="subTitle">
                                    <text>{{ item.insertDate ? item.insertDate.split(" ")[0] : "" }}</text>
                                    <text style="margin: 0 44rpx">{{ item.downloadNum }}下载</text>
                                    <text>{{ item.pageCount || 0 }}页</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
                <scroll-view :scroll-y="true" class="scrollWrap" style="padding-bottom: 0;" v-else>
                    <view style="background-color: #F9F9F9; border-radius: 12px;padding: 30rpx;margin-top: 40rpx;position: relative;"
                        v-for="(item, index) in practiceData" :key="item.practiceUuid" @click="() => onJump(item,item.expire!=0&&value=='res')">
                        <image src="../../static/images/removedIcon.svg" v-if="item.expire!=0&&value=='res'" style="width: 76rpx;height: 74rpx;position: absolute;left: 0;top: 0;" />
                        <view style="display: flex;justify-content: space-between;">
                            <view style="flex:1" class="textHide">{{ item.name }}</view>
                            <view style="display: flex;">
                                <text style="color: #666666; font-size: 14px;">查看</text>
                                <u-icon name="arrow-right" size="16"></u-icon>
                            </view>
                        </view>
                        <view style="margin-top: 20rpx;">
                            <view class="flex" style="align-items: center;">
                                <image src="../../static/images/coPlanIcon.svg" style="width: 40rpx;height: 40rpx;margin-right: 28rpx;" />
                                <text v-if="value=='practice'" style="color: #666666;font-size: 24rpx;flex:1" class="textHide">{{ item.planName||"--" }}</text>
                                <text v-else  style="color: #666666;font-size: 24rpx;flex:1" class="textHide">题库数量：{{ item.itemNum||"0" }}道</text>
                            </view>
                            <view class="flex" style="margin-top: 16rpx;align-items: center;">
                                <image src="../../static/images/coTimeIcon.svg" style="width: 40rpx;height: 40rpx;margin-right: 28rpx;" />
                                <text v-if="value=='practice'" style="color: #666666;font-size: 24rpx;flex:1" class="textHide">截止时间：{{ item.endTime||"不限时" }}</text>
                                <text v-else style="color: #666666;font-size: 24rpx;flex:1" class="textHide">发布时间：{{ item.lastModifyDataDate ||"--" }}</text>
                            </view>
                            <!-- <view style="display: flex;align-items: center;">
                                <image src="../../static/images/total.svg" style="width:40rpx;height: 40rpx;"></image>
                                <text style="color: #666666; font-size: 14px;margin-left: 10rpx;">共{{
                                    item.total }}道</text>
                            </view>
                            <view style="display: flex;align-items: center;margin-left: 30rpx;">
                                <image src="../../static/images/wrongQuestion.svg" style="width:40rpx;height: 40rpx;">
                                </image>
                                <text style="color: #666666; font-size: 14px;">{{ item.num }} {{ type == 2 ? '收藏' : '错题'
                                    }}</text>
                            </view> -->

                        </view>
                    </view>
                </scroll-view>
            </view>
            <view v-else style="height: calc(100vh - 600rpx);" class="center">
                <view class="flex flex-column center" style="padding: 57rpx 0 100rpx 0;">
                    <image src="../../static/images/nothing.svg"
                        style="width: 360rpx;height: 270rpx;margin-bottom: 26rpx;" />
                    <text style="font-size: 28rpx;margin-top: 40rpx;">很抱歉，没有发现内容</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { pagePracticePlan, questionTabItemMarket, questionTabPractice, questionTabPracticeHeader, resListPage, studentTab } from '../../services/PracticeTestingService';
import { resCollectList } from '../../services/TeachingMaterialService';
import { notificationFun } from '../../utils/PrjUtils';
export default {
    data() {
        return {
            list1: [
                {
                    name: '在线练测',
                    value: 'practice',
                    tableName: 'BhPracticePlanOutline,BzStudyRecord'
                },
                {
                    name: '题库市场',
                    value: 'res',
                    tableName: 'FuncItemMarket'
                },
                {
                    name: '教材资源',
                    value: 'teachingMaterial',
                    tableName: ''
                },
                {
                    name: '资料文档',
                    value: 'dataDocument',
                    tableName: ''
                },
                // {
                //     name: '在线考试',
                //     value: 'exam',
                //     tableName: ''
                // },
                // {
                //     name: '能力提升',
                //     value: 'ability',
                //     tableName: ''
                // },
            ],
            type: '',  // 1 错题 2 收藏
            value: 'practice',
            practiceData: [],
            information: {}, // 头部信息
            loginData: {},
            safeAreaInsets: {},
            queryKey: '',
            tableName: 'BhPracticePlanOutline,BzStudyRecord',
        }
    },
    computed: {
        listData() {
            console.log(this.type, "111")
            if (this.type != "2"&&this.type!="3") {
                return this.list1.filter(item => !["教材资源", "资料文档"].includes(item.name))
            }
            return this.list1
        }
    },
    onLoad(option) {
        this.onInitLogin();
        this.onStudentTab()
        this.type = option.type
        // if (option.type == "3") {
        //     this.onPagePracticePlan()
        // }
        // else {
        //     this.onQuestionTabPractice()
        //     this.onQuestionTabPracticeHeader(option.type)
        // }
        // if (this.type == "3") {
        //     this.onPagePracticePlan()
        // }
        // else if (this.type == "2" && (this.value == "teachingMaterial" || this.value == "dataDocument")) {
        //     this.onGetResInfo(this.value);
        // }
        // else {
        //     this.onQuestionTabPractice()
        //     this.onQuestionTabPracticeHeader(this.type)
        // }
        console.log("1")
    },
    onShow() {
        console.log("2",this.type)
        this.onGetInfo(this.type, this.value)
    },
    methods: {
        onInitLogin() {
            uni.getSystemInfo({
                success: (res) => {
                    this.safeAreaInsets = res.safeAreaInsets
                }
            })
            if (uni.getStorageSync('appKey')) {
                this.loginData = {
                    ...uni.getStorageSync('loginData'),
                };
            } else {
                this.loginData = {};
            }
        },
        click(item) {
            console.log(item, 'item')
            this.value = item.value
            this.tableName = item.tableName
            this.practiceData = []
            console.log(this.type,"--261")
            // 初始化数据
            this.onGetInfo(this.type, item.value)
            //如果是资料文档和教材资源
            // if (["teachingMaterial", "dataDocument"].includes(item.value)) {
            //     this.onGetResInfo(this.value);
            //     return
            // }
            // else if ((this.type == "2" || this.type == "1")) {
                // if(this.value==='practice'){

                //     this.onQuestionTabPractices()
                // }else if(this.value==='res'){
                //     this.onQuestionTabItemMarket()
                // }
            //     this.onQuestionTabPractices()
            //     this.onQuestionTabPracticeHeader(this.type)
            // }
            // else if(this.type=="3"){
            //     this.onPagePracticePlan()
            // }
        },
        // 学员tab
        onStudentTab() {
            studentTab().then(res => {
                console.log('res', res);
            })
        },
        // 查询列表数据
        onQuestionTabPractices(searchValue) {
            this.queryKey=searchValue
            this.onGetInfo(this.type, this.value)
            // if (["teachingMaterial", "dataDocument"].includes(this.value)) {
            //     this.onGetResInfo(this.value);
            //     return
            // } else if ((this.type == "2" || this.type == "1")) {
            //     if (this.value === 'practice') {
            //         this.onQuestionTabPractice()
            //     } else if (this.value === 'res') {
            //         this.onQuestionTabItemMarket()
            //     }
            //     // this.onQuestionTabPracticeHeader(this.type)
            // }

        },
        // 题库市场错题/收藏列表计划项目
        onQuestionTabItemMarket() {
            questionTabItemMarket({ type: this.type, queryKey: this.queryKey }).then(res => {
                this.practiceData = res
            })
        },
        onQuestionTabPractice() {
            questionTabPractice({ type: this.type, queryKey: this.queryKey }).then(res => {
                this.practiceData = res
            })
        },
        // 查询我参与的教程资源和资料文档
        onResListPage(){
            // 判断是教程资源还是资料文档
            // let type=this.value=='dataDocument'?2:1
            let dict={
                "practice":3,
                "res":4,
                "teachingMaterial":1,
                "dataDocument":2
            }
            resListPage({ type: dict[this.value], name: this.queryKey }).then(res => {
                this.practiceData = res
            })
        },
        // 查询我参与的
        onPagePracticePlan() {
            pagePracticePlan({tabType:this.value=="practice"?1:2}).then(res => {
                this.practiceData = res
            })
        },
        // 查询头部信息
        onQuestionTabPracticeHeader(type) {
            questionTabPracticeHeader({ type }).then(res => {
                this.information = res
            })
        },
        // 查询
        onJump(item,isGo=false) {
            if(isGo){
                return notificationFun("当前题库已下架，暂不支持浏览")
            }
            if (this.type == 3) {
                if(this.value=="practice"){
                    uni.navigateTo({
                        url: '/pages/practiceTesting/practicePage?planItem=' + encodeURIComponent(JSON.stringify({...item,id:item.practiceUuid}))
                    })
                }
                else{
                    uni.navigateTo({
                        url: '/questionBankMarket/questionDetailPage?questionItem=' + encodeURIComponent(JSON.stringify({...item,marketId:item.id,subjectName:item.name,}))
                    })
                }
            }
            else {
                // uni.navigateTo({
                //     url: '/pages/practiceTesting/exercisesPage?practiceUuid=' + item.practiceUuid + '&isCollection=true&exerciseType=' + this.type + '&collection=true&tableName=' + this.tableName
                // })
                uni.navigateTo({
                    url: `/questionBankMarket/myWrongQuestionPage?practiceUuid=${item.practiceUuid}&title=${this.type == 1 ? '我的错题' : '我的收藏'}&type=${this.type}&flag=true&tableName=${this.tableName}&tabType=${this.value}`
                });
            }

        },
        // 教材详情跳转
        onGoDetaile(record, type,isGo=false) {
            if(isGo){
                return type=="teachingMaterial"?notificationFun("当前教材已下架，暂不支持浏览"):notificationFun("当前文档已下架，暂不支持浏览");
            }
            if (type == "teachingMaterial") {
                uni.navigateTo({
                    url: `/teachingMaterial/materialDetail?info=${encodeURIComponent(JSON.stringify(record))}`
                })
            }
            else {
                uni.navigateTo({
                    url: `/dataDocument/showFileDetailDoc?info=${encodeURIComponent(JSON.stringify(record))}`
                })
            }
        },
        // 查询资源
        onGetResInfo() {
            let type = this.value == "teachingMaterial" ? 1 : 2
            resCollectList(this.queryKey, type).then(res => {
                console.log(res, "--207")
                this.practiceData = res
            })
        },
        onBack() {
            uni.navigateBack()
        },
        // 以前逻辑太难理了重写
        //我的收藏    
        onMyCollection(tabType){
            switch (tabType) {
                //在线练测
                case "practice":
                     this.onQuestionTabPractice()
                    break;
                // 题库市场
                case "res":
                    this.onQuestionTabItemMarket()
                    break;
                // 教程资源
                case "teachingMaterial":
                // 资料文档
                case "dataDocument":
                    this.onGetResInfo(this.value);
                    break;
            }
        },
        //我的错题
        onMyWrongQuestion(tabType){
            console.log(tabType,"---413")
            switch (tabType) {
                 //在线练测
                 case "practice":
                     this.onQuestionTabPractice()
                    break;
                // 题库市场
                case "res":
                    this.onQuestionTabItemMarket()
                    break;
                // 教程资源
                case "teachingMaterial":
                // 资料文档
                case "dataDocument":
                    break;
            }
        },
        //我的参与
        onMyParticipation(tabType) {
            switch (tabType) {
                //在线练测
                case "practice":
                // 题库市场
                case "res":
                    // // 应该是有问题-----
                    // this.onPagePracticePlan()
                    // break;
                // 教程资源
                case "teachingMaterial":
                // 资料文档
                case "dataDocument":
                    this.onResListPage()
                    break;
            }
        },
        // 查询信息
        onGetInfo(type,tabValue){
            switch (type) {
                // 我的错题
                case "1":
                    this.onMyWrongQuestion(tabValue)
                    break;
                // 我的收藏
                case "2":
                    this.onMyCollection(tabValue)
                    break;
                // 我参与的
                case "3":
                    this.onMyParticipation(tabValue)
                    break;
            }
        }
    }
}
</script>

<style lang="scss">
page {
    background: #fff !important;
}

.collWrap {
    .fileItem {
        height: 128rpx;
        border-radius: 24rpx;
        background-color: #F9F9F9;
        display: flex;
        align-items: center;
        justify-items: center;
        padding: 30rpx 34rpx;
        box-sizing: border-box;
        margin-bottom: 32rpx;

        .contentStyle {
            margin-left: 28rpx;
            display: flex;
            width: 500rpx;
            flex-direction: column;

            .title {
                font-size: 32rpx;
                margin-bottom: 5rpx;
            }

            .subTitle {
                font-size: 24rpx;
                color: #999999
            }
        }
    }

    .card {
        height: 172rpx;
        /* background-color: red; */
        background-color: #F9F9F9;
        display: flex;
        justify-content: space-between;
        padding: 12rpx 30rpx 12rpx 24rpx;
        border-radius: 24rpx;
        margin-bottom: 32rpx;
    }

    .scrollWrap {
        height: calc(100vh - 734rpx);
        box-sizing: border-box;
        padding-bottom: 32rpx;
    }
}
</style>
